<template>
	<view class="business-content">
		<addressSearch bgColor="#2D56C5" ref="setAddres" @searchBtn='searchHandler' :isShowAddress="false">
		</addressSearch>
		<!-- 选择按钮 -->
		<view class="business-grid">
			<view class="business-grid-btn" :key="index" v-for="(item,index) in seriesData"
				@click="btnHandler(index,item)" :class="{'business-grid-btn-active':btnActive==index?true:false}">
				{{item.name}}
			</view>
		</view>
		<!-- 列表 -->
		<template v-if="listData.length">
			<!-- scroll-y="true" :refresher-enabled="isRefresh" @refresh="moreData" -->
			<scroll-view   scroll-y="true" :style="'height:' + scroll_height+';top:'+scrollViewTop + 'px'" style="position: fixed;width: 100%;" :scroll-top="scrollTop" refresher-enabled
				:refresher-triggered="triggered" @refresherrefresh="onRefresh" @scrolltolower="lower">
				<view class="business-list" @click="listHandler(item)" :key="index" v-for="(item,index) in listData">
					<view class="business-list-img"><image :src="item.picture" mode="scaleToFill"></image></view>
					<view class="business-list-content">
						<view class="business-list-content-name">
							{{item.cars_name}}
						</view>
						<view class="business-list-content-type">
							{{item.cars_type}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.appearance_interior}}
						</view>
						<view class="business-list-content-note">
							{{item.remark}}
						</view>
						<view class="business-list-content-price">
							<view class="business-list-content-price-first">
								{{item.price}}万
							</view>
							<view class="business-list-content-price-date">
								{{item.create_time}}
							</view>
						
						</view>
					</view>
				</view>
			</scroll-view>
		</template>
		<template v-else>
			<view class="" style="display: flex;justify-content: center;margin-top: 100px;">
				<image src="../../static/nodata.png" mode="" style="width: 200px;height: 220px;"></image>
			</view>
			
		</template>

	</view>
</template>

<script>
	import addressSearchFixed from "@/components/addressSearch/addressSearchFixed.vue"
	import addressSearch from "@/components/addressSearch/addressSearch.vue"
	import {
		getCarSeriesData,
		getVehicleData
	} from "@/api/newCarSerach.js"
	export default {
		components: {
			addressSearchFixed,
			addressSearch
		},
		data() {
			return {
				scroll_height:"calc(100vh - 132px)",
				scrollTop: 0,
				triggered:false,
				serch: "",
				btnActive: 0,
				seriesId: "",
				seriesData: [],
				listData: [],
				page: 1,
				pageNum: 15
			}
		},
		methods: {
			//下拉刷新
			onRefresh() {
				// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
				setTimeout(() => {
					this.page = 1;
					// this.ajax.load = true;
					this.isRefresher = true;
					this.getListData()
				}, 800);
			},
			// 上拉加载
			lower() {
				this.page = this.page + 1
				
				if (this.waterfall.status == '' || this.waterfall.status == 'finish' || this.waterfall.status ==
					'loading') {
					uni.showToast({
						title: '没有数据了',
						icon: 'none'
					})
					this.$utils.log("没有数据了")
					return
					
				}
				this.getListData()
			},
			moreData: function() {
				this.pageNum+=15
				this.getListData()
				this.isRefresh=!this.isRefresh
			},
			searchHandler: function() {
				console.log("查询", this.$refs.setAddres.content);
				this.serch = this.$refs.setAddres.content
				this.getListData()
			},
			btnHandler: function(num, data) {
				this.btnActive = num
				this.seriesId = data.id
				this.getListData()
			},
			listHandler: function(data) {
				uni.navigateTo({
					url: "/pages/home/newCar/newCarDetail/newCarDetail?id=" + data.id
				})
			},
			getListData: function() {
				const that=this
				that.triggered = true
				getVehicleData(this.seriesId, this.serch, this.pageNum, this.page).then(res => {
					console.log("liebiao====", res);
					this.listData = res.data.data
					uni.stopPullDownRefresh();
					that.triggered = false
				}).catch(() => {
					uni.stopPullDownRefresh();
				})
			}
		},
		onShow() {
			this.btnActive = 0
			getCarSeriesData().then(res => {
				this.seriesData = res.data
				this.seriesId = res.data[0].id
				this.getListData()
			})
		},
	}
</script>

<style scoped lang="scss">
	.business-grid {
		padding: 10px;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
		align-items: center;

		// margin-top: 40px;
		&-btn {
			background-color: #F7F8FA;
			border-radius: 13px;
			padding: 6px 10px;
			margin: 5px 4px;
			overflow: hidden;

			&-active {
				background-color: #E6EEFE;
				color: #3E72CD;
			}
		}
	}

	.business-list {
		display: flex;
		margin: 10px;
		padding: 10px;
		border-radius: 7px;
		background-color: #fff;

		&-img {
			width: 150px;
			height: 100px;
			border-radius: 8px;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;
			image{
				width: 100%;
			}
		}

		&-content {
			margin-left: 10px;
			line-height: 25px;
			font-size: 12px;
			flex: 1;

			&-name {
				font-size: 16px;
				font-weight: bold;
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			&-type {}

			&-note {
				color: #999999;
				overflow: hidden;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
			}

			&-price {
				display: flex;
				justify-content: space-between;
				width: 100%;

				&-first {
					font-size: 18px;
					color: red;
					font-weight: bold;
				}

				&-date {
					color: #999999;
				}
			}
		}
	}
</style>